<template>
  <v-container fluid fill-height>
    <v-card height="100%" width="100%" outlined>
      <v-list two-line>
        <v-subheader
          class="display-1 text--primary"
          v-text="question"
        ></v-subheader>
        <v-list-item>
          <v-list-item-content>
            <v-list-item-subtitle>
              <span class="text--primary" v-text="user" />
              <span class="pl-2" v-text="file + ' - ' + position" />
            </v-list-item-subtitle>
            <v-list-item-title class="pt-2" v-text="content" />
          </v-list-item-content>
        </v-list-item>
        <v-list-item-group color="primary">
          <template v-for="(chat, index) in chats">
            <v-divider :key="'d-' + index" />
            <v-list-item :key="index + chat.content" disabled>
              <v-list-item-content>
                <v-list-item-title>
                  <v-icon class="pr-2" v-if="chat.teacher" color="yellow"
                    >mdi-star</v-icon
                  >
                  <span v-text="chat.user" />
                </v-list-item-title>
                <v-list-item-title
                  class="text--primary pt-2"
                  v-text="chat.content"
                />
              </v-list-item-content>
            </v-list-item>
          </template>
        </v-list-item-group>
      </v-list>
      <v-list-item>
        <v-text-field
          dense
          outlined
          label="聊天信息"
          v-model="chatContent"
          append-icon="mdi-send"
          @click:append="addChat()"
        />
      </v-list-item>
    </v-card>
  </v-container>
</template>
<script>
import { mapState } from "vuex";
export default {
  data: () => ({
    chatContent: "",
    name: ""
  }),
  computed: {
    ...mapState({
      user: state => state.discussion.user,
      teacher: state => state.teacher,
      teacherName: state => state.teacherName,
      question: state => state.discussion.question,
      content: state => state.discussion.content,
      file: state => state.discussion.file,
      position: state => state.discussion.position,
      chats: state => state.discussions
    })
  },
  methods: {
    addChat() {
      if (this.chatContent.trim().length !== 0) {
        if (this.teacher) {
          this.name = this.teacherName;
        } else {
          this.name = this.user;
        }
        this.$store.commit("ADD_DISCUSSION", {
          user: this.name,
          content: this.chatContent,
          teacher: this.teacher
        });
        this.chatContent = "";
      }
    }
  }
};
</script>
